<template>
    <el-container ref="container">
        <el-row>
            <el-col :span="24">
                <tree ref="tree" :data="myData" :node-key="nodeKey" :default-expand-all="true" :show-checkbox="true"
                    :props="defaultProps" :checkOnClickNode="true" >
                </tree>
            </el-col>
            <el-col :span="24" class="dialog-footer" style="margin-top: 18px;">
                <el-button @click="dialogCancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </el-col>
        </el-row>
    </el-container>
</template>
  
<script>
import tree from '@/components/tree/index'
export default {
    components: {
        'tree': tree,
    },
    data() {
        return {
            nodeKey: 'NodeId',
            defaultProps: {
                children: 'children',
                label: 'Text'
            },
            myData: [],
            parentList: {},
            searchData: {}
        };
    },
    props: {
        pkid: {
            type: Number,
            default: 0,
        },
        parentid: Number,
    },
    methods: {
        dialogCancel() {
            this.$emit("closeMoule", false);
        },
        GetEntity() {
            this.$http.post("/api/role/ToMenus?roleId=" + this.parentid, '', (res) => {
                this.myData = res.Data
                this.$http.post("/api/role/Check?roleId=" + this.pkid, '', (checkRes) => {
                    this.$refs.tree.setCheckedNodes(checkRes.Data);
                })
            })
        },
        submitForm() {
            //获取选中角色菜单
            var checkarr = this.$refs.tree.getCheckedNodes(false, true);
            //获取选中菜单
            var checkmenus = checkarr.filter(c => c.IsMenu == true);
            var mids = [];
            checkmenus.forEach(m => {
                mids.push(m.Pkid)
            });
            //获取选中按钮
            var checkbtns = checkarr.filter(c => c.IsBtn == true);
            var bids = [];
            checkbtns.forEach(m => {
                bids.push(m.Pkid)
            });

            var json = {
                RoleId: this.pkid,
                MenuIds: mids,
                PermisSionIds: bids
            }
            this.$http.post("/api/role/SetToMenus", json, (res) => {
                if (res.Code == 200) {
                    this.$msg.success("设置成功");
                    this.$emit("closeMoule", true);
                }
            })
        },
    },
    watch: {
        pkid: {
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
                if (newVal > 0) {
                    this.GetEntity();
                }
            },
        },
    },
};
</script>
  
<style scoped>
.dialog-footer button {
    float: right;
    height: 36px;
    line-height: 8px;
    margin-left: 5px;
}
</style>
  